<template>
  <div class="detail">
    <my-back></my-back>
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="(item, index) in detailObj.pics2" :key="index">
        <img :src="item" alt="" />
      </van-swipe-item>
    </van-swipe>
    <div class="detail-it-top">
      <p>{{ detailObj.basicInfo?.name }}</p>
      <span>{{ detailObj.basicInfo?.characteristic }}</span>
      <section>
        <span style="color: red"
          >低价￥{{ detailObj.basicInfo?.minPrice }}</span
        >
        <!-- &#x3000; 中文空格 -->
        <span>&#x3000;原价￥{{ detailObj.basicInfo?.originalPrice }}</span>
        <span>库存{{ detailObj.basicInfo?.stores }}</span>
      </section>
    </div>
    <cut-title @cut="cut"></cut-title>
    <div v-html="detailObj.content" v-show="showExplain"></div>
    <div v-show="!showExplain" style="background:#fff">
      <evaluate
        :evObj="item"
        v-for="(item, index) in evList"
        :key="index"
      ></evaluate>
    </div>
  </div>
</template>

<script>
import { reactive, toRefs } from "vue";
import { useRoute } from "vue-router";
import { getDetail, getEvaluate } from "../../api/second/second";
import myBack from "../../components/myBack.vue";
import CutTitle from "../../components/cutTitle.vue";
import evaluate from "../../components/evaluate.vue";
export default {
  components: { myBack, CutTitle, evaluate },
  setup() {
    const route = useRoute();
    let id = route.params.id;
    const data = reactive({
      detailObj: {},
      evList: [], // 商品评价的数组
      showExplain: true
    });
    getDetail({ id: id }).then((res) => {
      // console.log(res);
      data.detailObj = res.data;
    });
    getEvaluate({ goodsId: id }).then((res) => {
      data.evList = res.data;
    });

    const cut = (i) => {
       data.showExplain = i==0?true:false
    }
    return {
      ...toRefs(data),
      cut
    };
  },
};
</script>
<style lang="scss" scoped>
.detail {
  height: 100%;
  background: #e9e9e9;
  .my-swipe {
    img {
      width: 100%;
      height: 750px;
    }
  }
  .detail-it-top {
    background: #fff;
    padding: 0 10px 10px 26px;
    overflow: hidden;
    margin-top: -20px;
    p {
      font-size: 30px;
      margin-top: 50px;
    }
    span {
      font-size: 24px;
      color: #b8b8b8;
      margin: 30px 0 34px;
    }
    section {
      display: flex;
      height: 70px;
      span:last-child {
        margin-left: auto;
      }
    }
  }
}
</style>